<script>
import { reactive, toRefs } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      tableLabel: [
        "摄像头标识ID",
        "摄像头名称",
        "摄像头型号",
        "摄像头位置-楼层",
        "摄像头位置-平面位置-X",
        "摄像头位置-平面位置-Y",
        "摄像头启用状态",
        "摄像头备注",
        "摄像头对应出入口",
      ],
      tableData: [
        {
          摄像头标识ID: "24234",
          摄像头名称: "呃呃呃",
          摄像头型号: "24-34",
          "摄像头位置-楼层": "2",
          "摄像头位置-平面位置-X": "24",
          "摄像头位置-平面位置-Y": "34",
          摄像头启用状态: "正常",
          摄像头备注: "无",
          摄像头对应出入口: "Q2",
        },
        {
          摄像头标识ID: "24234",
          摄像头名称: "呃呃呃",
          摄像头型号: "24-34",
          "摄像头位置-楼层": "2",
          "摄像头位置-平面位置-X": "24",
          "摄像头位置-平面位置-Y": "34",
          摄像头启用状态: "正常",
          摄像头备注: "无",
          摄像头对应出入口: "Q2",
        },
      ],
    });

    return { ...toRefs(state) };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never"> 模型 </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <Table :tableLabel="tableLabel" :tableData="tableData" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>